<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notepad</title>

    <!-- bootstrap -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

    <!-- animate.css -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- 重置样式 -->
    <link rel="stylesheet" href="./assets/css/reset.css" />

    <!-- mui框架css -->
    <link rel="stylesheet" href="./assets/plugins/mui/css/mui.min.css">

    <!-- mescroll下拉刷新和上拉加载插件 -->
    <link rel="stylesheet" href="./assets/plugins/mescroll/mescroll.min.css">

    <!-- 公共样式 -->
    <link rel="stylesheet" href="./assets/css/common.css" />

    <!-- 页面独立的 -->
    <link rel="stylesheet" href="./assets/css/index.css" />
</head>

<body>
    <!-- 搜索 -->
    <div class="search">
        <div class="box">
            <div class="icon">
                <span class="glyphicon glyphicon-search"></span>
            </div>

            <input class="input" placeholder="请输入分类名称" id="search" />

            <button class="btn" size="mini" type="default" id="keyword">搜索</button>
        </div>
    </div>


    <!-- 列表 -->
    <div class="contact wow fadeInUp mescroll" data-wow-delay="100ms" id="typelist">
        <ul class="mui-table-view">
        </ul>
    </div>

    <div class="action">
        <a href="typeadd.html" class="mui-btn mui-btn-danger">添加分类</a>
    </div>
</body>

</html>
<!-- jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- wow.js -->
<script src="./assets/js/wow.min.js"></script>

<!-- mui框架js -->
<script src="./assets/plugins/mui/js/mui.min.js"></script>

<!-- mescroll下拉刷新和上拉加载插件 -->
<script src="./assets/plugins/mescroll/mescroll.min.js"></script>

<!-- 请求插件 -->
<script src="./assets/plugins/axios/axios.min.js"></script>
<script src="./assets/plugins/axios/request.js"></script>

<!-- 引入cookie -->
<script src="./assets/plugins/cookle.js"></script>
<!-- 校验用户是否登陆 -->
<script src="./assets/plugins/check.js"></script>

<script>
    //实例化wow.js
    new WOW().init();

    let Business = cookie.get('Business') ? JSON.parse(cookie.get('Business')) : {}

    // 页码
    let page = 1;
    // 每页显示数量
    let limit = 5;

    var mescroll = new MeScroll("typelist", { //第一个参数"mescroll"对应上面布局结构div的id
        down: {
            callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
        },
        up: {
            callback: upCallback,
            auto: true,  //是否在初始化完毕之后自动执行一次上拉加载的回调
            page: {
                size: limit //每页数据条数,默认10
            },
            toTop: {
                //回到顶部按钮
                src: "./assets/images/top.svg", //图片路径,默认null,支持网络图
                offset: 50 //列表滚动1000px才显示回到顶部按钮	
            },
            empty: {
                tip: "暂无相关数据~" //提示
            },
        }
    })


    //下拉刷新的回调
    function downCallback() {
        // 处理方式一: 重置mescroll内部变量(如mescroll.num=1和mescroll.hasNext=true), 自动触发upCallback
        mescroll.resetUpScroll();
        $("#typelist ul").html('')
    }

    // 上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
    async function upCallback(val) {
        page = val.num;
        let result = await POST({
            url: 'card/type/index',
            params: {
                page: page,
                limit: limit,
                businessid: Business.id,
                search: $("#search").val()
            }
        })

        if (result.code == 0) {
            mui.toast(result.msg);
            mescroll.endBySize(0, 0);
            return false;
        }

        let list = result.data ? result.data.list : [];
        let count = result.data ? result.data.count : 0;

        //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
        //必传参数(当前页的数据个数, 总数据量)
        mescroll.endBySize(list.length, count);

        setListData(list)
    }

    function setListData(data) {
        data.forEach((item) => {
            let str = `
                <li class="mui-table-view-cell">${item.name}
                    <button type="button" class="mui-btn mui-btn-warning" onclick="edit('${item.id}')">编辑</button>
                    <button type="button" class="mui-btn mui-btn-danger" onclick="del('${item.id}', '${item.name}')">删除</button>
                </li>
            `
            $("#typelist ul").append(str)
        })
    }

    $("#keyword").click(function () {
        downCallback()
    })

    $(document).keydown(function (e) {
        if (e.keyCode == 13) {
            downCallback()
        }
    })

    // 编辑
    function edit(id) {
        location.href = "typeedit.html?typeid=" + id;
    }

    // 删除
    function del(id, val) {
        mui.confirm('删除', `确认是否删除${val}分类?`, ['确定', '取消'], async function (e) {
            if (e.index == 0) {
                let result = await POST({
                    url: 'card/type/del', params: {
                        businessid: Business.id,
                        typeid: id
                    }
                })

                if (result.code == 1) {
                    mui.toast(result.msg);
                    downCallback()
                }
                else {
                    mui.toast(result.msg);
                }
            }
        })
    }
</script>